<template>
    <div class="container mb70">
        <div class="title flex">
            <span>热门推荐</span>
            <div class="tab" >
                <template v-for="(item,index) in tags">
                    <router-link :to="'top/playlist?cat='+item.name" :key="index">{{item.name}}</router-link>
                    <span v-if="index!=tags.length-1" :key="index+'k'">|</span>
                </template>
            </div>
        </div>
        <PlayListItem 
            url='/top/playlist'
            v-loading="loading"
            element-loading-text="拼命加载中"
        ></PlayListItem>
    </div>
</template>

<script>
import request from '../network/request'
import PlayListItem from './content/PlayListItem'
import elementLoading from './../mixin/elementLoading'
export default {
    name:'Recommend',
    data() {
        return{
            tags:null
        }
    },
    mixins:[elementLoading],
    components:{
        PlayListItem
    },
    computed:{
    
    },
    created(){
        request({url:'playlist/catlist'})
        .then(res=>{
            this.tags=res.data.sub.slice(0,12)
        })
    },
    methods:{
        
    }
}
</script>

<style lang="scss" scoped>
    .title{
        height: 30px;
        line-height: 30px;
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 14px;
        &>span{
            margin-right: 20px;
        }
        .tab{
            a{
                margin: 0 10px;
                color: crimson;

                $colors: yellowgreen, orange, deeppink, green, deepskyblue, purple;
                @for $i from 1 through length($colors) {
                    &:nth-child(#{length($colors)}n+#{$i}) {
                        color: lighten(nth($colors, $i), 20%);
                    }
                }
            }
            span{
                color: #dedede;
                font-size: 10px;
            }
        }
    }
</style>